import React, { useRef } from 'react' 
import { connect } from 'react-redux' 
import { createAdd, createSub } from '../redux/action/action'

function Home(props) { 
    let addref = useRef()
    const add = () => {
        let val = addref.current.value
        props.jia(val * 1)
    }
    const sub = () => {
        let val = addref.current.value
        props.jian(val * 1)
    }
    const asycAdd = () => {
        let val = addref.current.value
        setTimeout(() => {
            props.jia(val * 1)
        }, 500); 
    }
    return (
        <div>
            <hr />
            <h1>当前值：{props.count.he} </h1>
            <select ref={addref}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select> &nbsp;
            <button onClick={add}> ++1 </button> &nbsp;
            <button onClick={sub}> -1 </button> &nbsp;
            <button onClick={asycAdd}> 异步加1 </button> &nbsp;
            <h1>Home</h1>
            <hr />
        </div>
    )
} 

export default connect(
    state => ({ count: state }),{
        jia: createAdd,
        jian: createSub
    }
)(Home)